<template>
  <div class="ai-try-on">
    <el-upload
        class="upload-demo"
        :action="uploadApi"
        :on-success="handleUploadSuccess1"
        :on-error="handleUploadError"
        :before-upload="beforeUpload"
        :show-file-list="false"
    >
      <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
      <el-button size="small" type="primary">上传人物模型图</el-button>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
    </el-upload>
    <el-upload
        class="upload-demo"
        :action="uploadApi"
        :on-success="handleUploadSuccess2"
        :on-error="handleUploadError"
        :before-upload="beforeUpload"
        :show-file-list="false"
    >
      <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
      <el-button size="small" type="primary">上传人物模型图</el-button>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
    </el-upload>
    <el-upload
        class="upload-demo"
        :action="uploadApi"
        :on-success="handleUploadSuccess3"
        :on-error="handleUploadError"
        :before-upload="beforeUpload"
        :show-file-list="false"ltiple
    >
      <img v-if="imageUrl3" :src="imageUrl3" class="avatar" />
      <el-button size="small" type="primary">上传下半身服饰图</el-button>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
    </el-upload>
    <el-button @click="tryOnClothes">点击试穿</el-button>
    <el-image v-if="syntheticImage" :src="syntheticImage" alt="合成图片" class="synImg"/>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import request from "@/request.js";

const syntheticImage = ref(null);
const uploadApi = "http://localhost:19090/common/upload";
const imageUrl1 = ref('')
const imageUrl2 = ref('')
const imageUrl3 = ref('')

const handleUploadSuccess1 = (response, file, fileList) => {
  imageUrl1.value = response.msg
};
const handleUploadSuccess2 = (response, file, fileList) => {
  imageUrl2.value = response.msg
};
const handleUploadSuccess3 = (response, file, fileList) => {
  imageUrl3.value = response.msg
};

const handleUploadError = (error, file, fileList) => {
  // 处理上传失败的逻辑
};

const beforeUpload = (file) => {
  // 上传前的验证逻辑
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    this.$message.error('只能上传jpg/png文件');
    return false;
  }
  return true;
};

const tryOnClothes = async () => {
  // 实现AI试衣的逻辑
  // 这里需要使用图像处理库或API来处理上传的图片
  // 并生成试衣效果的图片
  // 假设合成图片的URL为syntheticImageUrl
  request({
    url: "/common/aiFitting?personImageUrl="+imageUrl1.value+"&topGarmentUrl="+imageUrl2.value+"&bottomGarmentUrl="+imageUrl3.value,
    method: "get",
  }).then(result => {
    let taskObj = JSON.parse(result.msg);
    let interval = setInterval(()=>{
      request({
        url: "/common/getStatus?taskId="+taskObj.output.task_id,
        method: "get",
      }).then(result => {
        let statusObj = JSON.parse(result.data.body);
        console.log(statusObj.output.task_status)
        if(statusObj.output.task_status == "SUCCEEDED"){
          clearInterval(interval);
          syntheticImage.value = statusObj.output.image_url;
        }
      })
    },2000)
  })
}
</script>

<style scoped>
.ai-try-on {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.upload-demo {
  width: 400px;
  margin-top: 20px;
}

.image-preview {
  display: flex;
  justify-content: space-between;
  width: 400px;
  margin-top: 20px;
}

.image-preview img {
  width: 130px;
  height: 130px;
  object-fit: cover;
}
.avatar{
  width: 200px;
}
.synImg{
  width: 400px;
  position: absolute;
  right: 20px;
}
</style>
